<template>
    <Return></Return>
   <div class="hintBox">
    <el-alert title="课程创建成功" type="success" show-icon :closable="false" v-show="setSuccess" />
    <el-alert title="课程创建失败" type="error"  show-icon :closable="false" v-show="setFail" />
    <el-alert title="该课程已存在" type="error" show-icon :closable="false" v-show="courseExist" />
   </div>
    <div v-show="pageInd == 0">
        <AddCourse1 ref="add1" @changePage="changePage"   @getAddCourseInfo="getAddCourseInfo" ></AddCourse1>
    </div>
    <div v-show="pageInd == 1">
        <AddCourse2 @changePage="changePage"   @getAddCourseInfo="getAddCourseInfo"></AddCourse2>
    </div>
    <div v-show="pageInd == 2">
        <AddCourse3 @changePage="changePage"   @getAddCourseInfo="getAddCourseInfo" @submit="submit"></AddCourse3>
    </div>
</template>
<script setup >
import AddCourse1 from '../../components/AddCourse1.vue';
import AddCourse2 from '../../components/AddCourse2.vue';
import AddCourse3 from '../../components/AddCourse3.vue';
import Return from '../../components/Return.vue';
import { getUserData } from '../../utils';
import { onMounted, ref} from 'vue';
import axios from 'axios';
import { toArray } from 'lodash';

const pageInd = ref(0);

// 获得用户信息
// 获得用户信息
let userData = {
    Token: '',
    avatar: '',
    id: '',
    role: ''
}
if (getUserData() != undefined) {
    userData = getUserData();
}


//切换页面
const changePage = function(ind){
    pageInd.value = ind;
}

//要上传的课程信息
let classInfo={
    courseName: '', courseType : '', isPermanent : false,date :[],fileId : [], gTeacherId: [], tableList: [],
       introduction:'',
        preparation:'',
         requirement: '',
        catalogue : ''
}


//得到每一页的基本信息
const getAddCourseInfo = function(data, index){
    let {courseName = '', courseType = '', isPermanent = '',date = [], fileId = [], gTeacherId= '', tableList= [],
       introduction='', preparation='', requirement= '',
        catalogue = ''
    } = data
    if(index == 0){
        classInfo.courseName = courseName
        classInfo.courseType =courseType,
        classInfo.isPermanent = isPermanent,
        classInfo.date = date
        classInfo.fileId = fileId,
        classInfo.gTeacherId = gTeacherId
        classInfo.tableList = tableList
        console.log(classInfo);
    }
    else if(index == 1){
        classInfo.introduction =introduction
        classInfo.preparation = preparation
        classInfo.requirement =   requirement
        console.log(classInfo);
    }
    else if(index == 2){
        classInfo.catalogue = catalogue[0]
    }
}
onMounted(()=>{
    let main = document.querySelector('.main')
    main.style.height=""
})

//提交课程
const add1 = ref()
const setSuccess = ref(false)
const setFail = ref(false)
const courseExist = ref(false)
const submit = function(){
    console.log(classInfo.date);
    if(classInfo.date != undefined && classInfo.date != '')
    {
        classInfo.startDate = classInfo.date[0]
        classInfo.endDate = classInfo.date[1]
    }
    if(classInfo.isPermanent){
        classInfo.isPermanent = 1
    }
    else{
        classInfo.isPermanent = 0
    }
    classInfo.fileId = toArray(classInfo.fileId)
    classInfo.gTeacherId = toArray(classInfo.gTeacherId)
    for(let i = 0; i < classInfo.tableList.length; i++){
        if(classInfo.tableList[i].email != '' && classInfo.tableList[i].email.uid != ''){
            classInfo.gTeacherId.splice(classInfo.gTeacherId.length, 1, classInfo.tableList[i].email.uid)
        }
    }
    delete classInfo.tableList
    delete classInfo.date
    add1.value.submit()
    axios({
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Token': userData.Token,
    },
    method: 'post',
    data: JSON.stringify(classInfo),
    url: 'http://api.linwine.space/api/sjk/tec/course/add',
    responseType: "json",
}).then((data) => {
    console.log(data);
    let d = data.data
    if(d.code != 200){
        if(d.msg == '该用户发起的课程已存在'){
            courseExist.value = true;
            setTimeout(() => {
                courseExist.value = false
            }, 7000)
        }
        else{
            setFail.value = true;
            setTimeout(() => {
                setFail.value = false
            }, 7000)
        }
    }
    else{
        setSuccess.value = true;
        setTimeout(() => {
            setSuccess.value = false
        }, 7000)
    }
})
}
</script>
<style scoped>
.hintBox {
    top: 8%;
    left: 35%;
    width: 300px;
    position: absolute;
    z-index: 3;
    height: 100px;
}
</style>